<template>
  <transition name="slide-fade">
    <div v-show="visible" class="map-overlay">
      <div class="overlay-header">
        <h3>📋 {{ mapData.地图名称 }}</h3>
        <p class="subtitle">
          工作站管辖范围列表 
          <span class="tip">（点击定位👆）</span>
        </p>
      </div>
      
      <div class="overlay-content">
        <div 
          v-for="(station, index) in stations" 
          :key="index"
          class="station-card"
          :style="{ 
            background: `linear-gradient(135deg, ${station.color}15 0%, ${station.color}05 100%)`,
            borderLeft: `4px solid ${station.color}`
          }"
          @click="handleClick(index)"
        >
          <h4 :style="{ color: station.color }">
            <span 
              class="station-type-tag" 
              :style="{ background: station.color }"
            >
              {{ station.typeText }}
            </span>
            <span>{{ station.name }}</span>
          </h4>
          <p class="building-count">
            管辖范围 ({{ station.buildings.length }}个楼宇)：
          </p>
          <div class="building-grid">
            <div 
              v-for="(building, bIndex) in station.buildings" 
              :key="bIndex"
              class="building-item"
              :style="{ borderColor: station.color + '40' }"
              :title="building.楼宇名称"
            >
              <span 
                class="building-number"
                :style="{ 
                  background: station.color + '20', 
                  color: station.color 
                }"
              >
                {{ bIndex + 1 }}
              </span>
              <span class="building-name">{{ building.楼宇名称 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  },
  mapData: {
    type: Object,
    required: true
  },
  stationsData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['point-to-station'])

// 处理后的工作站数据
const stations = computed(() => {
  const data = props.mapData.数据
  const stationList = data.工作站列表 || data.工作站点位 || []
  
  return stationList
    .filter(station => station.覆盖楼宇列表 && station.覆盖楼宇列表.length > 0)
    .map(station => {
      const isCenter = station.工作站类型 === '中心站'
      return {
        name: station.工作站名称,
        typeText: isCenter ? '中心站' : '普通站',
        color: isCenter ? '#667eea' : '#48bb78',
        buildings: station.覆盖楼宇列表 || []
      }
    })
})

// 点击工作站
const handleClick = (index) => {
  emit('point-to-station', index)
}
</script>

<style scoped>
.map-overlay {
  position: absolute;
  top: 80px;
  left: 20px;
  max-width: 450px;
  max-height: calc(100% - 120px);
  background: rgba(255, 255, 255, 0.97);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  z-index: 998;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.overlay-header {
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  flex-shrink: 0;
}

.overlay-header h3 {
  font-size: 16px;
  margin-bottom: 6px;
  font-weight: 600;
}

.subtitle {
  font-size: 11px;
  opacity: 0.95;
  margin: 0;
}

.tip {
  color: #ffd700;
  font-weight: bold;
}

.overlay-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.station-card {
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.station-card:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.station-card h4 {
  font-size: 13px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.station-type-tag {
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
}

.building-count {
  font-size: 10px;
  color: #666;
  margin-bottom: 8px;
}

.building-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.building-item {
  background: white;
  padding: 5px 7px;
  border-radius: 4px;
  font-size: 10px;
  color: #555;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
  transition: all 0.2s;
}

.building-item:hover {
  transform: scale(1.05);
}

.building-number {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.building-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 动画 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}
</style>

